<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }

    canvas {
        display: block;
        background: black;
    }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var posX, posY;

    var w, h;

    init();

    function init() {
        w = window.innerWidth;
        h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;
    }
    window.onresize = init;



    function Particle() {
        this.color = 'white';
        this.r = 1;
        this.speedX = Math.random() * 1 - 0.5;
        this.speedY = Math.random() * 1 - 0.5;
        this.num = 300;
        this.data = [];

    }
    Particle.prototype = {
        init: function() {
            for (var i = 0; i < this.num; i++) {
                this.data[i] = {
                    x: Math.random() * w,
                    y: Math.random() * h,
                    speedX: Math.random() * 2 - 1,
                    speedY: Math.random() * 2 - 1
                }
                this.drawParticle(this.data[i].x, this.data[i].y);
            }
        },
        drawParticle: function(x, y) {
            ctx.beginPath();
            ctx.fillStyle = 'pink';
            ctx.arc(x, y, this.r, 0, Math.PI * 2, false);
            ctx.fill();
        },
        move: function() {
            ctx.clearRect(0, 0, w, h);
            for (var i = 0; i < this.num; i++) {
                this.data[i].x += this.data[i].speedX;
                this.data[i].y += this.data[i].speedY;
                if (this.data[i].x < 0 || this.data[i].x > w) {
                    this.data[i].speedX = -this.data[i].speedX;
                }
                if (this.data[i].y < 0 || this.data[i].y > h) {
                    this.data[i].speedY = -this.data[i].speedY;
                }
                this.drawParticle(this.data[i].x, this.data[i].y);

                for (var j = i + 1; j < this.num; j++) {
                    if (posX != undefined && posY != undefined) {
                        if (Math.pow(this.data[i].x - posX, 2) + Math.pow(this.data[i].y - posY, 2) <= 80 * 80) {
                            this.drawLine(this.data[i].x, this.data[i].y, posX, posY);
                        }
                    }
                    if (Math.pow(this.data[i].x - this.data[j].x, 2) + Math.pow(this.data[i].y - this.data[j].y, 2) <= 80 * 80) {
                        this.drawLine(this.data[i].x, this.data[i].y, this.data[j].x, this.data[j].y);
                    }

                }
            }
        },
        drawLine: function(x1, y1, x2, y2) {
            var color = ctx.createLinearGradient(x1, y1, x2, y2);
            color.addColorStop(0, 'blue');
            color.addColorStop(1, 'lightblue');
            ctx.save();
            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
    }

    var particle = new Particle();
    particle.init();

    function moveParticle() {
        requestAnimationFrame(moveParticle);
        particle.move();
    }
    moveParticle();

    document.onmouseover = function(e) {
        canvas.onmousemove = function(e) {
            posX = e.offsetX;
            posY = e.offsetY;
        }
    }
    </script>
</body>

</html>